import {
  // RouteLocationNormalizedLoadedGeneric 是对应 ===> const route = useRoute() 的route 的类型
  RouteLocationNormalizedLoadedGeneric,
  // 对应 defineOptions({ name: "documentation"}) 的 name 类型
  RouteRecordName
} from "vue-router"

export const useTagsView = defineStore("tagsView", () => {
  // 选项卡 1. 记录访问过哪些视图，记录成选项卡[]
  const visitedViews = ref<RouteLocationNormalizedLoadedGeneric[]>([])
  // 选项卡 2. 添加视图函数
  const addView = (view: RouteLocationNormalizedLoadedGeneric) => {
    // 选项卡 2-1. 当前添加的视图是否已经存储过，存储过则不在添加
    const exits = visitedViews.value.some((v) => v.path === view.path)
    // 页面缓存 2 - 2. 在 添加视图函数 中使用 增加要缓存页面函数。 判断是否需要添加到缓存页面数组中，避免当前页面刷新后，会删除缓存，切换选卡，导致缓存失效
    addCacheView(view)
    if (exits) return
    // 选项卡 2-2. 增加 每个页卡的名字 用于渲染 选项卡
    const newView = {
      ...view,
      title: view.meta.title // 每个页卡的名字
    }
    // 选项卡 2-3. 增加 选项卡
    visitedViews.value.push(newView)
  }
  // 选项卡 3. 删除视图函数
  const deleteView = (view: RouteLocationNormalizedLoadedGeneric) => {
    // 选项卡 3-1. 找到 删除视图 的 index
    const index = visitedViews.value.findIndex((v) => v.path === view.path)
    if (index > -1) {
      // 选项卡 3-2. 删除视图
      visitedViews.value.splice(index, 1)
    }
    // 页面缓存 3-1. 在 删除视图函数 使用 删除缓存页面函数
    deleteCacheView(view)
  }
  // 页面缓存 1. 需要缓存 页面 name 数组   []
  const cacheViews = ref<RouteRecordName[]>([])
  // 页面缓存 2. 增加要缓存页面 函数
  const addCacheView = (view: RouteLocationNormalizedLoadedGeneric) => {
    if (cacheViews.value.includes(view.name)) return
    if (!view.meta.noCache) {
      // 页面缓存 2-2. 不在缓存列表的页面,  把`noCache:false`页面当前的name，增加到缓存列表
      cacheViews.value.push(view.name)
    }
  }
  // 页面缓存 3. 删除缓存页面函数
  const deleteCacheView = (view: RouteLocationNormalizedLoadedGeneric) => {
    const index = cacheViews.value.indexOf(view.name)
    if (index > -1) {
      cacheViews.value.splice(index, 1)
    }
  }
  // 关闭所有 1. 删除除了固定路由选卡之外的，所有选卡. 删除所有缓存
  const delAllView = () => {
    // 关闭所有 1-1. 删除除了固定路由选卡之外的，所有选卡
    visitedViews.value = visitedViews.value.filter((view) => view.meta.affix)
    // 关闭所有 1-2. 缓存列表 删除所有缓存
    cacheViews.value = []
  }
  // 关闭其他 1. 删除除了固定路由选卡,和当前路由之外的，所有选卡. 删除当前路由之外的所有缓存
  const deleteOtherView = (view: RouteLocationNormalizedLoadedGeneric) => {
    visitedViews.value = visitedViews.value.filter(
      //  关闭其他 1-1. 删除，除了固定路由选卡,和当前路由之外的，所有选卡
      (v) => v.meta.affix || v.path === view.path
    )
    // 关闭其他 1-2. 缓存列表 , 删除当前路由之外的所有缓存
    cacheViews.value = cacheViews.value.filter((name) => name === view.name)
  }

  return {
    visitedViews,
    addView,
    deleteView,
    cacheViews,
    delAllView,
    deleteOtherView,
    deleteCacheView
  }
})
